<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>电商平台 - 商城</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
        }
        .product-card {
            margin-bottom: 20px;
            transition: transform 0.2s;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }
        .product-image {
            height: 200px;
            object-fit: cover;
        }
        .cart-icon {
            font-size: 1.2rem;
            margin-right: 5px;
        }
        .user-welcome {
            margin-right: 15px;
            display: flex;
            align-items: center;
        }
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
            object-fit: cover;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/mall">电商平台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="${pageContext.request.contextPath}/mall">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">全部商品</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">商品分类</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">电子产品</a></li>
                        <li><a class="dropdown-item" href="#">服装</a></li>
                        <li><a class="dropdown-item" href="#">食品</a></li>
                        <li><a class="dropdown-item" href="#">图书</a></li>
                    </ul>
                </li>
            </ul>

            <!-- 搜索框 -->
            <form class="d-flex me-3">
                <input class="form-control me-2" type="search" placeholder="搜索商品">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>

            <!-- 用户信息 -->
            <div class="d-flex align-items-center text-white">
                <div class="user-welcome">
                    <c:choose>
                        <c:when test="${sessionScope.user.avatar != null}">
                            <img src="${pageContext.request.contextPath}${sessionScope.user.avatar}" class="user-avatar" alt="用户头像">
                        </c:when>
                        <c:otherwise>
                            <img src="${pageContext.request.contextPath}/static/images/default-avatar.png" class="user-avatar" alt="默认头像">
                        </c:otherwise>
                    </c:choose>
                    <span>
                        <c:choose>
                            <c:when test="${sessionScope.user.nickname != null}">
                                ${sessionScope.user.nickname}
                            </c:when>
                            <c:otherwise>
                                ${sessionScope.user.username}
                            </c:otherwise>
                        </c:choose>
                    </span>
                </div>
                <a href="#" class="btn btn-outline-light me-2">
                    <i class="cart-icon">🛒</i>购物车
                </a>
                <a href="${pageContext.request.contextPath}/user/profile" class="btn btn-outline-light me-2">个人中心</a>
                <a href="${pageContext.request.contextPath}/user/logout" class="btn btn-outline-light">退出</a>
            </div>
        </div>
    </div>
</nav>

<!-- 主要内容区 -->
<div class="container mt-4">
    <!-- 提示消息 -->
    <c:if test="${not empty message}">
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </c:if>

    <!-- 轮播图 -->
    <div id="carouselMain" class="carousel slide mb-4" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/1200x400/007bff/ffffff?text=热销商品" class="d-block w-100" alt="热销商品">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/1200x400/28a745/ffffff?text=新品上市" class="d-block w-100" alt="新品上市">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/1200x400/dc3545/ffffff?text=优惠活动" class="d-block w-100" alt="优惠活动">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselMain" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselMain" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- 商品分类标题 -->
    <h2 class="mb-4">热门商品</h2>

    <!-- 商品展示 -->
    <div class="row">
        <!-- 商品卡片 1 -->
        <div class="col-md-3">
            <div class="card product-card">
                <img src="https://via.placeholder.com/300/007bff/ffffff?text=商品1" class="card-img-top product-image" alt="商品1">
                <div class="card-body">
                    <h5 class="card-title">商品名称</h5>
                    <p class="card-text text-danger">¥ 199.00</p>
                    <button class="btn btn-primary w-100">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 商品卡片 2 -->
        <div class="col-md-3">
            <div class="card product-card">
                <img src="https://via.placeholder.com/300/28a745/ffffff?text=商品2" class="card-img-top product-image" alt="商品2">
                <div class="card-body">
                    <h5 class="card-title">商品名称</h5>
                    <p class="card-text text-danger">¥ 299.00</p>
                    <button class="btn btn-primary w-100">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 商品卡片 3 -->
        <div class="col-md-3">
            <div class="card product-card">
                <img src="https://via.placeholder.com/300/dc3545/ffffff?text=商品3" class="card-img-top product-image" alt="商品3">
                <div class="card-body">
                    <h5 class="card-title">商品名称</h5>
                    <p class="card-text text-danger">¥ 399.00</p>
                    <button class="btn btn-primary w-100">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 商品卡片 4 -->
        <div class="col-md-3">
            <div class="card product-card">
                <img src="https://via.placeholder.com/300/ffc107/ffffff?text=商品4" class="card-img-top product-image" alt="商品4">
                <div class="card-body">
                    <h5 class="card-title">商品名称</h5>
                    <p class="card-text text-danger">¥ 499.00</p>
                    <button class="btn btn-primary w-100">加入购物车</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-dark text-white mt-5 py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>关于我们</h5>
                <p>电商平台致力于为用户提供优质的购物体验。</p>
            </div>
            <div class="col-md-4">
                <h5>联系方式</h5>
                <p>电话：400-123-4567<br>邮箱：support@example.com</p>
            </div>
            <div class="col-md-4">
                <h5>关注我们</h5>
                <p>微信公众号：电商平台<br>微博：@电商平台官方</p>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">© 2024 电商平台 版权所有</p>
        </div>
    </div>
</footer>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>